<template>
  <div class="stay-info-container">
    <div class="stay-info-box scroll-box">
      <div class="info-top-box">
        <div class="info-content-box info-border">
          <div class="info-content-left">设备名称</div>
          <div class="info-content-reight">{{ detailData.deviceName }}</div>
        </div>
        <div class="info-content-box">
          <div class="info-content-left">设备编号</div>
          <div class="info-content-reight">{{ detailData.deviceNumber }}</div>
        </div>
      </div>

      <div class="info-conter-box">
        <div class="info-content-box info-border">
          <div class="info-content-left">通知类型</div>
          <div class="info-content-reight" v-if="parseInt(detailData.type) === 1">
            <span class="color-red"><i class="iconfont iconyubaojing"></i> 报警</span>
          </div>
          <div class="info-content-reight" v-else-if="parseInt(detailData.type) === 2">
            <span class="color-green"><i class="iconfont iconzaixian"></i>恢复</span>
          </div>
        </div>
        <div class="info-content-box info-border">
          <div class="info-content-left">报警等级</div>
          <div class="info-content-reight" v-if="parseInt(detailData.grade) === 1">一级</div>
          <div class="info-content-reight" v-if="parseInt(detailData.grade) === 2">二级</div>
          <div class="info-content-reight" v-if="parseInt(detailData.grade) === 3">三级</div>
          <div class="info-content-reight" v-if="parseInt(detailData.grade) === 4">四级</div>
          <div class="info-content-reight" v-if="parseInt(detailData.grade) === 5">五级</div>
        </div>
        <div class="info-content-box info-border">
          <div class="info-content-left">通知时间</div>
          <div class="info-content-reight">{{ new Date(detailData.time).Format('yyyy/MM/dd hh:mm:ss') }}</div>
        </div>
        <div class="info-content-box info-border">
          <div class="info-content-left">故障代码</div>
          <div class="info-content-reight">{{ detailData.errorCode }}</div>
        </div>
        <div class="info-content-box info-border">
          <div class="info-content-left">故障名称</div>
          <div class="info-content-reight">{{ detailData.errorName }}</div>
        </div>
        <div class="info-content-box info-border">
          <div class="info-content-left">故障描述</div>
          <div class="info-content-reight">{{ detailData.errorDesc }}</div>
        </div>
        <div class="info-content-box info-border">
          <div class="info-content-left">合同编号</div>
          <div class="info-content-reight">{{ detailData.protocol }}</div>
        </div>
      </div>

      <div class="info-bottom-box">
        <div class="info-content-box info-border">
          <div class="info-content-left">产线编号</div>
          <div class="info-content-reight">{{ detailData.productNumber }}</div>
        </div>
        <div class="info-content-box info-border">
          <div class="info-content-left">产线识别号</div>
          <div class="info-content-reight">{{ detailData.identificationNumber }}</div>
        </div>
      </div>

      <div class="info-bottom-button-box" v-if="$route.query.from !== 'other'">
        <!--  -->
        <div
          v-if="detailData.status === 1 && $checkBtnPermission('maintenanceCenter:alarmNotice:list:detail:confirm')"
          class="edit-button-box"
          @click="onConfirmAlarmNotice()"
        >
          <i class="iconfont iconcircleline-gouxuan color-primary"></i>
          <span>确认通知</span>
        </div>

        <div
          class="assign-button-box"
          v-if="
            detailData.status === 2 &&
            $checkBtnPermission('maintenanceCenter:alarmNotice:list:detail:transform') &&
            detailData.confirmId === parseInt(customerInfo.userId)
          "
          @click="onTransForWorkOrder()"
        >
          <i class="iconfont iconzhuangongdan2 color-primary"></i>
          <span>转工单</span>
        </div>
        <!--  -->
        <div
          v-if="detailData.status === 2 && detailData.confirmId === parseInt(customerInfo.userId)"
          class="separate"
        ></div>
        <!-- -->
        <div
          v-if="
            detailData.status === 2 &&
            $checkBtnPermission('maintenanceCenter:alarmNotice:list:detail:delay') &&
            detailData.confirmId === parseInt(customerInfo.userId)
          "
          class="cancel-button-box"
          @click="onDelayed()"
        >
          <i class="iconfont iconzhuangongdan color-primary"></i>
          延时
        </div>
      </div>
    </div>

    <!-- 延时 -->
    <van-dialog
      v-model="dialogCancel"
      title="延时通知"
      confirmButtonColor="#3378FF"
      show-cancel-button
      @confirm="delayAlarm"
    >
      <div class="dialogCancel-box">到达时间点后，再次监测故障是否已恢复，如果已恢复，则不再通知否则继续推送通知</div>
      <div class="dialogCancel-text"><span class="color-red">*</span>延时</div>
      <van-field v-model="dialogDelayValue" type="number" placeholder="请输入" error-message="" />
    </van-dialog>
  </div>
</template>

<script>
import { Tab, Tabs, Button, Dialog, Field, Notify } from 'vant';
import {
  getAlarmNoticeDetail,
  confirmAlarmNotice,
  neglectAlarmNotice,
  delayAlarmNotice
} from '@/api/maintenanceAlarmNotification';
import DeviceDetailVue from '../../deviceCenter/deviceManage/DeviceDetail.vue';
export default {
  name: 'StayWorkDetail',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    // [Dialog.name]: Dialog,
    [Dialog.Component.name]: Dialog.Component,
    [Field.name]: Field,
    [Notify.name]: Notify
  },
  data() {
    return {
      active: 1,
      dialogCancel: false,
      dialogDelayValue: '', //延时时间
      tag: 1,
      id: '', //获取id
      detailData: {},
      customerInfo: {}
    };
  },
  created() {
    console.log(this.$route.query);
    this.id = this.$route.query.id || '';
    this.customerInfo = JSON.parse(localStorage.getItem('userInfo')) || {};
    this.getDetail();
  },
  methods: {
    //接单
    onComeOrder() {
      Dialog.confirm({
        title: '接单成功',
        confirmButtonText: '处理工单',
        confirmButtonColor: '#3378FF',
        cancelButtonText: '关闭',
        message: '工单（202104130001）已接单成功，请及时进行处理.'
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    //
    onConfirmAlarmNotice() {
      confirmAlarmNotice({ id: this.id }).then(res => {
        console.log(res.message);
        if (parseInt(res.message) === 204) {
          this.$toast({
            message: '已确认',
            onClose: () => {
              this.getDetail();
            }
          });
        }
      });
    },
    //忽略弹窗
    onOpenEditWorkOrderManage() {
      Dialog.confirm({
        title: '忽略通知',
        message: '故障通知忽略后，系统不再后续通知是否恢复，确定要忽略？',
        confirmButtonColor: 'var(--color-primary)'
      })
        .then(() => {
          neglectAlarmNotice({ id: this.id }).then(res => {
            console.log(res.message);
            if (parseInt(res.message) === 204) {
              this.$toast({
                message: '已忽略',
                onClose: () => {
                  this.getDetail();
                }
              });
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //获取详情
    getDetail() {
      getAlarmNoticeDetail({ id: this.id }).then(res => {
        console.log(res);

        this.$nextTick(function () {
          this.detailData = res.data;
          console.log(
            this.detailData.confirmId === parseInt(this.customerInfoId) || parseInt(this.customerInfoId) === 1,
            this.detailData,
            this.customerInfoId,
            'id相关'
          );
        });
      });
    },

    onTransForWorkOrder() {
      this.$router.push({
        name: 'transforWorkOrder',
        query: {
          id: this.id
        }
      });
    },
    //打开延迟窗口
    onDelayed() {
      this.dialogCancel = true;
    },
    delayAlarm() {
      delayAlarmNotice({ id: this.id, time: parseInt(this.dialogDelayValue) }).then(res => {
        console.log(res);
        if (parseInt(res.message) === 204) {
          this.$toast({
            message: '已延时',
            onClose: () => {
              this.getDetail();
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.stay-info-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.stay-info-box {
  width: 100%;
  height: 100%;
  margin-bottom: 1.92rem;
}
.info-top-box {
  width: 100%;
  height: 2.426667rem;
  background-color: #fff;
  padding: 0px 0.426667rem;
  // margin-top: 0.213333rem;
}
.info-conter-box {
  width: 100%;
  // height: 9.786667rem;
  background-color: #fff;
  padding: 0px 0.426667rem;
  // margin-top: 0.213333rem;
}
.info-bottom-box {
  width: 100%;
  height: 2.426667rem;
  background-color: #fff;
  padding: 0px 0.426667rem;
  // margin-top: 0.213333rem;
}

.info-content-box {
  width: 100%;
  min-height: 1.226667rem;
  display: flex;
  padding-top: 0.453333rem;
}
.info-content-left {
  width: 1.92rem;
  color: #999999;
  font-size: 0.373333rem;
  min-width: 1.92rem;
  white-space: nowrap;
}
.info-content-reight {
  color: #333333;
  font-size: 0.373333rem;
  margin-left: 0.426667rem;
  width: 7.733333rem;
}
.info-border {
  border-bottom: 1px solid #f2f6fc;
}
.float-tel {
  float: right;
}

//操作按钮
.info-bottom-button-box {
  width: 100%;
  height: 2.026667rem;
  background-color: #fff;
  padding: 0.4rem 0.426667rem;
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  .separate {
    height: 100%;
    border: #f2f6fc 1px solid;
  }
  .edit-button-box {
    color: var(--color-primary);
    font-size: 0.373333rem;
    text-align: center;
    flex: 1;
    span {
      position: relative;
      color: #3378ff;
      cursor: pointer;
      padding-left: 0.133333rem;
      // padding-right: 0.906667rem;
    }
  }
  .assign-button-box {
    color: var(--color-primary);
    font-size: 0.373333rem;
    flex: 1;
    text-align: center;
    span {
      position: relative;
      color: #3378ff;
      cursor: pointer;
      padding-left: 0.133333rem;
      padding-right: 0.906667rem;
    }
  }
  .cancel-button-box {
    color: var(--color-primary);
    font-size: 0.373333rem;
    flex: 1;
    text-align: center;
  }
  .delete-button-box {
    color: var(--color-red);
    font-size: 0.373333rem;
  }
}

//按钮
.button-margin {
  margin: 0.426667rem;
  position: fixed;
  width: 91%;
  bottom: 0.533333rem;
}
::v-deep .van-button {
  border-radius: 0.106667rem;
}

//取消工单
.dialogCancel-box {
  padding: 0.426667rem;
  color: rgb(51, 51, 51);
}
.dialogCancel-text {
  font-size: 0.32rem;
  color: #666666;
  padding-left: 0.426667rem;
  margin-top: 0.266667rem;
}
::v-deep .van-field__value {
  border-bottom: 1px solid #ebeef5;
}
</style>
